<template>
	<view>
		<view class="head"></view>
		<view class="box">
			<view class="tabs">
				<u-tabs
					:list="list1"
					 lineWidth="30"
					lineColor="#4BC264"
					:activeStyle="{
						color: '#1C274C',
						fontWeight: 'bold',
						transform: 'scale(1.02)'
					}"
					:inactiveStyle="{
						color: '#A4A9B7',
						transform: 'scale(1)'
					}"
					itemStyle="padding-left: 20px; padding-right: 20px; height: 42px;"
				></u-tabs>
			</view>
			
			<view class="z-margin-t-24" v-for="i in 3">
				<!-- <uni-section title="配置图片" type="line"> -->
					<uni-collapse>
						<uni-collapse-item :border="false" title-border="none" title="为什么系统不能结算？" :thumb="image">
							<view class="content">
								<view class="content-l">
									<image class="qa" src="../../static/my/a.png" mode=""></image>
								</view>
								<view class="content-r">
									<view class="">1、检查台球是否按照要求全部归还、白球是否归还在指定位置，否则将提示关锁失败。</view>
									<view class="">2、首台、擦粉请不要放在台球盒子内。</view>
									<view class="">3、检查台球等是否已经关闭，有异常请及时联系商家电话或平台客服热线。</view>
									<view class="">4、还是不能解决问题，请及时联系商家电话或平台客服热线。</view>
								</view>
							</view>
						</uni-collapse-item>
					</uni-collapse>
				<!-- </uni-section> -->
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			image: require('@/static/my/q.png'),
			list1: [
				{
					name: '人工客服'
				},
				{
					name: '订单咨费'
				},
				{
					name: '押金与充值'
				}
			]
		};
	},
	methods: {}
};
</script>

<style lang="scss">
// /deep/ .u-tabs__wrapper__nav {
// 	justify-content: space-between;
// }
page {
	background: #f7f8fa;
}
.head {
	width: 100%;
	height: 80rpx;
	background: #e5f6f2;
}
.box {
	width: 686rpx;
	background: #F7F8FA;
	border-radius: 40rpx 40rpx 0rpx 0rpx;
	padding: 20rpx 32rpx 0 32rpx;
	position: relative;
	top: -50rpx;
	
	.tabs {
		display: flex;
		justify-content: center;
	}
	
	.content {
		display: flex;
		justify-content: space-between;
		padding: 0 32rpx;
		.content-l {
			padding-right: 24rpx;
			.qa {
				width: 32rpx;
				height: 32rpx;
			}
		}
		.content-r {
			font-weight: 500;
			font-size: 24rpx;
			color: #6B738B;
			line-height: 32rpx;
			view {
				padding-bottom: 24rpx;
			}
		}
	}
}
</style>
